<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
			*{
				padding: 0px;
				margin: 0px;
				border: 0px;
				touch-action: pan-y;
			}
			/*这里获取浏览器显示区域100%的宽高*/
			html{
				width: 100%;
				height: 100%;
			}
			/*继承*/
			body{
				width: 100%;
				height: 100%;
			}
			body .bian {
				border-radius: 100%;
				width: 20px;
				height: 20px;
				background: rgba(0, 0, 0, 0.342);
				position: absolute;
				animation: bian 0.5s linear both 1;
			} 
			/*动画效果，从实体到透明，从小到大*/
			@keyframes bian {
				0% {
					opacity: 1;
					transform: scale(1)
				}

				100% {
					opacity: 0;
					transform: scale(8)
				}
			}
		</style>
<base href="<%=basePath%>">

<title>欢迎注册</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" type="text/css" href="css/register.css">
<link rel="stylesheet" type="text/css" href="css/check.css">


<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>
	<div id="s1">
		<div id="s2">欢迎注册</div>
		<form action="Register" id="myform" method="get">
			<label class="s3" for="username">请输入用户名</label> 
				<input id="s5" type="text" placeholder="请输入用户名"  class="form-control" name="username" onblur="checkName()"/><br> 
				<div id="tishi1"></div>
				<label
				class="s4" for="password">请输入密码</label> 
				<input id="password" placeholder="请输入密码" type="password" class="form-control " name="password" onblur="check()"/> <br /> 
				<div id="tishi2"></div>
				<label
				class="s4" for="password_again">请再次输入密码</label> 
				<input class="form-control" placeholder="请确认密码" id="password_again" name="password_again" type="password" onblur="check()"/> <br />
				<div id="tishi3"></div>
			    <input id="s7" class="btn btn-info" type="submit" onclick="return check()" value="提交"></button>
			<button id="s8" class="btn btn-info" type="reset" value="取消">取消</button>
		</form>
	</div>
</body>
<script>
			//获取鼠标点击位置的xy
			function getMousePos(event) {
				   var e = event || window.event;
				   var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
				   var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
				   var x = e.pageX || e.clientX + scrollX;
				   var y = e.pageY || e.clientY + scrollY;
				   return { 'x': x, 'y': y };
			}
			/*获取body的DOM*/
			var main = document.querySelector('body');
			/*鼠标每次在body的宽高内移动就会重新加载一次鼠标位置，这样点击后动画会更快的播放*/
			main.onmousemove = function (e) {
				let MouseXY = getMousePos(e);
				var x = MouseXY['x'];
				var y = MouseXY['y'];
				console.log(x, y);
				main.onclick = function () {
					var div = document.createElement('div');
					div.setAttribute("class","bian");
					div.style.left = x + 'px';
					div.style.top = y + 'px';
					/*随机颜色*/
					var r = Math.floor(Math.random() * 256)
					var g = Math.floor(Math.random() * 256)
					var b = Math.floor(Math.random() * 256)
					div.style.background = "rgb(" + r + ',' + g + ',' + b + ")";
					main.appendChild(div);
					setTimeout(function () {
						main.removeChild(div);
					}, 600)
				}
			}
		</script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script
	src="https://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script
	src="https://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>

<script>
	function checkName() {
		var name = document.getElementById("s5").value;
		//用户名检验
		var namePattern = /^[a-zA-Z0-9_-]{4,16}$/;//4到16位（字母，数字，下划线，减号）
		if(name==''||name==null||!namePattern.test(name))
		{
			document.getElementById('tishi1').innerHTML="";
			document.getElementById('tishi1').innerHTML="用户名不够规范。\r\n要求长度4到16位且只能由字母，数字，下划线，短横线构成";
			return false;
		}
	}
	function check() {
		var pwd1 = document.getElementById("password").value;
		var pwd2 = document.getElementById("password_again").value;

		//密码验证
			if (pwd1==''||pwd1==null)
			{
				document.getElementById('tishi2').innerHTML="密码为空";
				return false;
			}else document.getElementById('tishi2').innerHTML="";
			if (pwd1!=pwd2)
			{
				document.getElementById('tishi3').innerHTML="";
				document.getElementById('tishi3').innerHTML="两次密码不一致";
				return false;
			}
			//正则验证密码强度
			if(checkPassword(pwd1)) return true;
			else return false;
	}
	 function checkPassword(str){
 	    var Pattern1 = /([a-zA-Z0-9!@#$%^&*()_?<>{}]){8,18}/;
 	    var Pattern4 = /[!@#$%^&*()_?<>{}]{1,}/;
 	    var warning4= "建议密码包含一个以上的特殊字符\r\n特殊字符包括!@#$%^&*()_?<>{}\r\n";
 	    var Pattern2 = /[a-zA-Z]+/;
 	    var Pattern3 = /[0-9]+/;
 	    if(Pattern1.test(str) && Pattern2.test(str) && Pattern3.test(str) && Pattern4.test(str)){
 	        return true;
 	    }
 	    if(!Pattern1.test(str)){
 	    	document.getElementById('tishi2').innerHTML="";
 	    	document.getElementById('tishi2').innerHTML="长度必须在8-18位";
 	        return false;
 	    }else if(!Pattern2.test(str)){
 	    	document.getElementById('tishi2').innerHTML="";
 	    	document.getElementById('tishi2').innerHTML="必须含有字母";
 	        return false;
 	    }else if(!Pattern3.test(str)){
 	    	document.getElementById('tishi2').innerHTML="";
 	    	document.getElementById('tishi2').innerHTML="必须含有数字";
 	        return false;
 	    }else if(!Pattern4.test(str)){
 	        if(confirm("弱密码警告\r\n"+warning4+"仍然要使用输入的弱密码么？"))
 	        return true;
 	        else return false;
 	    }
 	}
</script>

</html>
